<template>
  <div style="height: 100%;">
    <div class="btbox btboxbg flexb fontz" style="color: #333;">
      <div>
        {{$t('jy.newexchange')}}
      </div>
      <div class="flex" v-if="$appName === 'eosNewdex'">
        <el-tooltip placement="bottom-end" :effect="$store.state.app.theme === 'theme-278EDA' ? 'light' : 'dark'">
          <div slot="content" class="cozyTipContent">
            <p>{{$t('jy.cozyTipContent')}}</p>
          </div>
          <div class="cozyTip">
            <i class="iconfont icon-jiaoyizanting"></i>
              {{$t('jy.cozyTip')}}
          </div>
        </el-tooltip>
      </div>
    </div>
    <div class="flex tl leftTitle">
      <span>
        {{$t('jy.price')}}
        <template v-if="trad.b.name === 'MEETONE'">
          (meet...)
        </template>
        <template v-else>
          ({{trad.b.name}})
        </template>
      </span>
      <span>{{$t('jy.number')}}({{trad.a.name}})</span>
      <span>{{$t('order.time')}}</span>
      <!-- <span>{{$t('jy.jydetail')}}</span> -->
    </div>
    <div class="overflowbox scrollbar" v-loading="loading">
      <div class="blist" v-if="latest.length > 0">
        <div class="flex ltd"
        v-for="(item, index) in latestData" :key="index" @click="handleOrderSuccessDetail(item.id)" :title="$t('public.lookClick')">
          <span class="color-sl" :class="{'color-sr': item.active_direction === 2}">
            {{toFixed(toNonExponential(item.price), trad.priceDecimal)}}</span>
          <span>{{toFixed(toNonExponential(item.amount), trad.coinDecimal)}}</span>
          <span class="color-fff">{{item.time * 1000 | dateFormatMonthHour}}</span>
          <!-- <span class="color-fff">···</span> -->
        </div>
      </div>
      <p class="center pt" v-else>{{hasDataForTable ? $t('myWallet.loadData') : $t('myWallet.noData')}}</p>
    </div>
  </div>
</template>

<script>
import Io from '@/utils/socket/index';
import { toFixed, toNonExponential } from '@/utils/validate';

export default {
  name: 'trading-right-bottom',
  data() {
    return {
      ticker: '',
      latestData: [],
      latest: [],
      loading: true,
      hasDataForTable: true,
    };
  },
  props: {
    trad: Object,
  },
  watch: {
    'trad.id': function change() {
      if (this.ticker !== '') {
        Io.cfwsUnsubscribe(`latest.${this.ticker}`); // 取消最新成交订阅
      }
      this.hasDataForTable = true;
      this.ticker = this.trad.symbol;
      this.handleLatestTransaction();
    },
    latest: function change(vals) {
      const items = vals;
      // if (items.length > 0) {
      //   items.forEach((v, i) => {
      //     items[items.length - 1].change = 1;
      //     const j = items.length - 1 - i;
      //     if (j !== 0 && items[j - 1].price < items[j].price) {
      //       items[j - 1].change = 0;
      //     }
      //     if (j !== 0 && items[j - 1].price > items[j].price) {
      //       items[j - 1].change = 1;
      //     }
      //     if (j !== 0 && items[j - 1].price === items[j].price) {
      //       items[j - 1].change = items[j].change;
      //     }
      //   });
      // }
      this.latestData = items;
    },
  },
  components: {
  },
  created() {
  },
  mounted() {
  },
  beforeDestroy() {
    Io.cfwsUnsubscribe(`latest.${this.ticker}`); // 取消最新成交订阅
  },
  methods: {
    // 获取实时交易数据
    handleLatestTransaction() {
      this.latest = [];
      this.loading = true;
      const params = {
        symbol: this.ticker
      };
      if (this.latest.length === 0) {
        Io.cfwsLatestTransaction(params, (res) => {
          this.latest.unshift(...res);
          if (this.latest.length === 0) {
            this.hasDataForTable = false;
          }
          this.loading = false;
        });
      }
    },
    // 查看具体详情TXID
    handleOrderSuccessDetail(id) {
      this.$emit('listenDetailAction', true, id);
    },
    toFixed(numb, p) {
      return toFixed(numb, p);
    },
    toNonExponential(num) {
      return toNonExponential(num);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

.btbox {
  height: 42px;
  padding: 0 11px;
}

.btboxbg {
  background: $-topcolorf7;
}

.cozyTipContent {
  width: 340px;
  font-size: 14px;
  line-height: 25px;
  padding: 5px;
  font-family: SourceHanSansSC-regular;
  color: #333;
}
.cozyTip {
  color: #FF9800;
  // padding-right: 10px;
  font-size: $-font-size;
  cursor: pointer;
  i {
    font-weight: bold;
  }
}

.tl {
  padding: 9.5px 0;
  span {
    flex: 1;
    text-align: center;
  }
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.ximg {
  a {
    display: block;
    padding: 3px;
    margin: 0 5px 0 0;
    border: 1px solid rgba(0, 0, 0, 0);
    img {
      display: block;
      vertical-align: top;
    }

    &.active, &:hover {
      border: 1px solid rgba(0, 0, 0, .2);
    }
  }
}
.theme-278EDA {
  span {
    color: #333;
  }
  .leftTitle {
    span {
      color: #999 !important;
    }
  }
}
.theme-1B1D27 {
  .btboxbg {
    background: $-topcolor2;
    color: $-main-color !important;
  }
  .box-shadow {
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
    background: $-topcolor;
  }
  .topcolor {
    background: $-topcolor;
  }
  .topc {
    background: $-topcolor3;
  }
  .ximg {
    a {
      &.active, &:hover {
        border: 1px solid #4e5b85;
      }
    }
  }
  .color-fff {
    color: rgba(255, 255, 255, .8);
  }

  .leftTitle {
    color: #909399;
  }
}

.leftTitle, .blist .ltd {
  span {
    position: relative;
    display: inline-block;
    overflow: hidden;
    z-index: 10;
    white-space: nowrap;

    &:first-child {
      width: 73px;
      max-width: 73px;
      min-width: 73px;
      margin-left: 7px;
      text-align: left;
    }

    &:nth-child(2) {
      width: 96px;
      min-width: 96px;
      max-width: 96px;
      text-align: right;
    }

    &:nth-child(3) {
      width: 100px;
      max-width: 100px;
      text-align: right;
      margin-right: 7px;
    }

    // &:last-child {
    //   width: 37px;
    //   max-width: 37px;
    //   margin-right: 5px;
    // }
  }
}

.blist {
  padding: 1px 0 0 0;

  .ltd {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    line-height: 26px;
    overflow: hidden;

    i.ambg {
      height: 99%;
      position: absolute;
      right: 0;
      // background: #67C269;
      z-index: 9;
      opacity: .3;
      top: 50%;
      transform: translateY(-50%);
      // background: linear-gradient(to right, RGBA(82, 177, 109, .2), RGBA(82, 177, 109, .4));
      background: RGBA(82, 177, 109, .35);
    }

    i.ambg1 {
      // background: linear-gradient(to right, RGBA(232, 18, 52, .15), RGBA(232, 18, 52, 0.3));
      background: RGBA(232, 18, 52, 0.2);
    }

    &:hover {
      cursor: pointer;
      span {
        font-weight: bold;
      }
      // span:last-child {
      //   font-size: 18px;
      //   transition: all 0.1s;
      // }
    }
    span {
      &:first-child {
      }

      &:nth-child(2) {
      }

      &:nth-child(3) {
      }

      // &:last-child {
      //   color: RGBA(0, 148, 213, 1);
      //   margin-right: 7px !important;
      //   cursor: pointer;
      //   font-size: 14px;
      // }

      // &:last-child:hover {
      //   font-size: 18px;
      //   transition: all 0.1s;
      // }
    }
  }
}

.leftTitle {
  display: flex;

  span {
    &:first-child {
    }

    &:nth-child(2) {
      // width: 120px;
      // min-width: 120px;
      // max-width: 120px;
      // text-align: center;
    }

    &:nth-child(3) {
      // width: 40px;
      // min-width: 40px;
      // max-width: 40px;
    }

    &:last-child {
    }

    &:last-child:hover {
    }
  }
}

.overflowbox {
  height: 79.5%;
  overflow: auto;
}

.tccob {
  padding: 5px;

  strong {
    font-size: 20px;
  }

  span {
    vertical-align: bottom;
  }

  i {
  }
}

.color-999 {
  color: #999;
}
.color-sl {
  color: #67C269 !important;
}
.color-sr {
  color: #EE1443 !important;
}
.color-fff {
  color: rgba(0, 0, 0, .7);
}

.minibtn {
  .el-button {
    padding: 2px 5px;
  }
}
</style>

